/*
* This file is part of syberos-settings
*
* Copyright (C) 2014 Beijing Yuan Xin Technology Co.,Ltd. All rights reserved.
*
* Authors:
*       Lele Huan <huanlele@syberos.com>
*
* This software, including documentation, is protected by copyright controlled
* by Beijing Yuan Xin Technology Co.,Ltd. All rights are reserved.
*/

import QtQuick 2.1
//import "../Common"
import "constants.js" as UI

Rectangle{
    id:wlanItem
    property string itemId: ""
    property string identity: ""
    property string mainTitle: ""
    property string subTitle: ""
    property string hintTitle: ""
    property string endTitle:""
    property string endImage:"qrc:/icon/res/icon_right.png"
    property string endImagePressed :"qrc:/icon/res/icon_right_active.png"
    property string headImage: ""
    property bool endMouseVisible: false
    property bool clickToChangeSwitch: true
    property alias switchChecked:autoSwitch.switchOn
    property alias backImageShow: background.visible
    property string type:""
    property int wlanItemHeight: UI.LIST_ITEM_HEIGHT
    property int mainTextFontPixelSize: UI.LIST_TITLE_SIZE
    property string mainTextFontFamily: UI.DEFAULT_FONTFAMILY
    property string mainTextFontColor: UI.LIST_TITLE_COLOR
    property string mainTextPressedColor: UI.LIST_PRESSED_COLOR

    property int subTextFontPixelSize:UI.LIST_SUBTILE_SIZE
    property string subTextFontFamily: UI.DEFAULT_FONTFAMILY
    property string subTextFontColor: UI.LIST_SUBTITLE_COLOR
    property string subTextPressedColor: UI.LIST_PRESSED_COLOR

    property int endTextPixelSize: UI.LIST_SUBTILE_SIZE
    property string endTextFontFamily: UI.DEFAULT_FONTFAMILY
    property string endTextFontColor: UI.LIST_SUBTITLE_COLOR
    property string endTextPressedColor: UI.LIST_PRESSED_COLOR
    property int endIconHeight: UI.LIST_RIGHTICON_HEIGHT
    property int endIconWidth: UI.LIST_RIGHTICON_WIDTH

    property int topSeparatorHeight: UI.LIST_SEPARETOR_LINE_HEIGHT
    property color topSeparatorColor: UI.LIST_SEPARETOR_LINE_COLOR
    property int bottomSeparatorHeight: UI.LIST_SEPARETOR_LINE_HEIGHT
    property color bottomSeparatorColor: UI.LIST_SEPARETOR_LINE_COLOR
    property int topIntervalHeight:UI.LIST_TOP_INTERVAL_HEIGHT
    property int  bottomIntervalHeight: UI.LIST_BTOTTOM_INTERVAL_HEIGHT

    property alias btmSeparatorItem: bottomSeparetor
    property alias topSeparatorItem: topSeparator
    property bool showbkground: true
    signal clicked(string itemId)

    signal switchCheckChangedByUser();

    signal checkedChanged(string itemId, bool checked)
    signal endImgClicked(string itemId)
    signal notRespondToClick()
    width: parent.width
    height: mainText.text != ""?
                ((titleCol.height + topSeparator.height +topIntervalHeight +
                  bottomSeparetor.height +bottomIntervalHeight) > wlanItem.wlanItemHeight ?
                     (titleCol.height + topSeparator.height +topIntervalHeight +
                      bottomSeparetor.height +bottomIntervalHeight) :wlanItem.wlanItemHeight):0
    visible: mainText.text !=""?true:false
    Rectangle{
        id:background
        anchors.fill: parent
        visible: mouseArea.pressed && showbkground
        color:UI.LIST_ITEM_BGCOLOR
    }
    Item {
        id: topSeparator
        width: parent.width
        height: topSeparatorHeight
        anchors.top: parent.top
        visible: topSeparatorHeight > 0
        anchors.topMargin: -2
        Rectangle {
            anchors.leftMargin: 40
            anchors.rightMargin: 40
            anchors.fill: parent
             color: topSeparatorColor
         }
    }

    Item{
        anchors.top: topSeparator.bottom
        anchors.topMargin: topIntervalHeight
        anchors.bottom: bottomSeparetor.top
        anchors.bottomMargin: bottomIntervalHeight
        width: parent.width
        Image{
            id:headImg
            anchors.left: parent.left
            anchors.leftMargin: UI.LIST_ICON_MARGIN_LEFT
            width: UI.LIST_ICON_WIDTH;height: UI.LIST_ICON_HEIGHT
            visible: source != ""
            source: headImage
            anchors.verticalCenter: parent.verticalCenter
        }
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                wlanItem.clicked(wlanItem.itemId);
                if(type == "switch" && wlanItem.clickToChangeSwitch === true){
                    autoSwitch.switchOn = !autoSwitch.switchOn;
                    wlanItem.switchCheckChangedByUser();
//                    autoSwitch.switchOnChangedByClicked();
                }else if(!wlanItem.clickToChangeSwitch) {
                    wlanItem.notRespondToClick();
                }
            }
        }
        Item{
            id:containItem
            height: titleCol.height
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: headImg.visible?headImg.right:parent.left
            anchors.leftMargin: headImg.visible?
                                    UI.LIST_ITEM_ROW_SPACEING:UI.LIST_TITLE_MARGIN_LEFT
            anchors.right: parent.right
            //anchors.rightMargin: UI.LIST_ICON_MARGIN_RIGHT
            Column {
                id:titleCol
                anchors.left: parent.left
                anchors.right: endItem.left
                anchors.rightMargin: endItem.width === 0 ? 0 : UI.LIST_ITEM_ROW_SPACEING
                spacing: UI.LIST_MAIN_SUB_SEPARATOR
                Text {
                    id: mainText; text: mainTitle
                    width:parent.width
                    horizontalAlignment:Text.AlignLeft
                    font.pixelSize: wlanItem.mainTextFontPixelSize
                    font.family:wlanItem.mainTextFontFamily
                    //color: enabled ? (mouseArea.pressed? wlanItem.mainTextPressedColor: wlanItem.mainTextFontColor) : UI.LIST_TITLE_DISABLE_COLOR //20131231 by caizhenbin
                    color: enabled ? wlanItem.mainTextFontColor : UI.LIST_TITLE_DISABLE_COLOR
                    onTextChanged: {
                        changeWidth();
                    }
                }

                Text {
                    id: subText
                    text: subTitle
                    width:parent.width
                    //lineHeight: 1.25
                    horizontalAlignment:Text.AlignLeft
                    font.pixelSize: wlanItem.subTextFontPixelSize
                    font.family:wlanItem.subTextFontFamily
                    //color: enabled ? (mouseArea.pressed? wlanItem.subTextPressedColor: wlanItem.subTextFontColor) : UI.LIST_TITLE_DISABLE_COLOR //20131231 by caizhenbin
                    color: enabled ? wlanItem.subTextFontColor : UI.LIST_TITLE_DISABLE_COLOR
                    visible: text != ""
                    onTextChanged: {
                        changeWidth();
                    }
                }
                Text {
                    id: hintText
                    text: hintTitle
                    width:parent.width
                    //lineHeight: 1.25
                    horizontalAlignment:Text.AlignLeft
                    font.pixelSize: wlanItem.subTextFontPixelSize
                    font.family:wlanItem.subTextFontFamily
                    //color: enabled ? (mouseArea.pressed? wlanItem.subTextPressedColor: wlanItem.subTextFontColor) : UI.LIST_TITLE_DISABLE_COLOR //20131231 by caizhenbin
                    color: enabled ? wlanItem.subTextFontColor : UI.LIST_TITLE_DISABLE_COLOR
                    visible: text != "" && !subText.visible
                    onTextChanged: {
                        changeWidth();
                    }
                }
            }
            Item{
                id:endItem
                //color:"red"
                height: parent.height
                anchors.right: parent.right
                width: endTitleIconItem.visible || autoSwitch.visible ?
                           (endTitleIconItem.visible && autoSwitch.visible?
                                Math.max(endTitleIconItem.width, autoSwitch.width) + UI.LIST_ICON_MARGIN_RIGHT*2:
                                endTitleIconItem.visible ?endTitleIconItem.width + UI.LIST_ICON_MARGIN_RIGHT*2:
                                        autoSwitch.visible?autoSwitch.width + UI.LIST_ICON_MARGIN_RIGHT*2:0):0
                Item{
                    id:endTitleIconItem
                    anchors.right: parent.right
                    anchors.rightMargin: UI.LIST_ICON_MARGIN_RIGHT
                    height: parent.height
                    width: endText.visible || endIcon.visible ?
                               (endText.visible && endIcon.visible?
                                    endText.width + endIcon.width + UI.LIST_ITEM_ROW_SPACEING/2:
                                          endText.visible?endText.width:endIcon.visible?endIcon.width:0): 0
                    Text {
                        id: endText
                        text: endTitle
                        width:endText.contentWidth
                        anchors.right: endIcon.visible? endIcon.left:parent.right
                        anchors.rightMargin: endIcon && endIcon.visible?UI.LIST_ITEM_ROW_SPACEING/2:0
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment:Text.AlignRight
                        font.pixelSize: wlanItem.endTextPixelSize
                        font.family: wlanItem.endTextFontFamily
                        color: "#999999"/*mouseArea.pressed ? wlanItem.endTextPressedColor: wlanItem.endTextFontColor*/
                        visible: text != ""
                        onTextChanged: {
                            endText.elide = Text.ElideNone;
                            changeWidth();
                        }
                    }
                    Image {
                        id:endIcon
                        //visible: type != "category"?false:true
                        //source:mouseArea.pressed?endImagePressed:endImage
                        source:endImgmouseArea.pressed?endImagePressed:endImage
                        height:endIconHeight
                        width: endIconWidth
                        fillMode: Image.PreserveAspectFit
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter
//                        MouseArea {
//                            id: endImgmouseArea
//                            anchors.fill: parent
//                            visible: endMouseVisible
//                            onClicked: {
//                                wlanItem.endImgClicked(wlanItem.itemId);
//                            }
//                        }
                    }
                }
                CSwitch {
                    id: autoSwitch
                    visible: type != "switch" ? false:true
                    anchors.right: parent.right
                    anchors.rightMargin: UI.LIST_ICON_MARGIN_RIGHT
                    anchors.verticalCenter: parent.verticalCenter

                    Component.onCompleted:
                    {
                        switchOnChangedByUser.connect(wlanItem.switchCheckChangedByUser)
                    }

//                    onSwitchOnChangedByClicked:{
//                        if(wlanItem.clickToChangeSwitch) {
//                            wlanItem.checkedChanged(wlanItem.itemId, switchOn)
//                        }else {
//                wlanItem.notRespondToClick();
//                        }
//                    }
//                    onSwitchChanged:{
//                        wlanItem.checkedChanged(wlanItem.itemId, isOn)}
                }
                MouseArea {
                    id: endImgmouseArea
                    anchors.fill: parent
                    visible: endMouseVisible
                    onClicked: {
                        wlanItem.endImgClicked(wlanItem.itemId);
                    }
                }

            }
            onWidthChanged: {
                if(endItem){
                    //console.log("huan lele onWidthChanged: ")
                    changeWidth();
                }
            }
        }
    }//end Item

    Item {
        id:bottomSeparetor
        height:bottomSeparatorHeight;
        width: parent.width
        anchors.bottom: parent.bottom
        visible: bottomSeparatorHeight > 0
        Rectangle {
            anchors.leftMargin: 40
            anchors.rightMargin: 40
            anchors.fill: parent
            color: UI.LIST_SEPARETOR_LINE_COLOR
         }
    }

    onVisibleChanged: {
        if(endItem && endItem.width){
            changeWidth();
        }
    }

    function changeWidth(){
        if(containItem.width <= 0)
            return;
        mainText.wrapMode  = Text.NoWrap;
        subText.wrapMode = Text.NoWrap;
        endText.elide = Text.ElideNone;
        var titleMaxLen = Math.max(mainText.contentWidth, subText.contentWidth);
        var itemWidth = Math.round(containItem.width) - UI.LIST_ITEM_ROW_SPACEING;
        if(type == "switch"){
            mainText.wrapMode = Text.WordWrap;
            subText.wrapMode = Text.WordWrap;
            return;
        }
        var endWidth = (endIcon.visible?
                    endIcon.width + UI.LIST_ITEM_ROW_SPACEING/2 + endText.contentWidth:
                    endText.contentWidth) + UI.LIST_ICON_MARGIN_RIGHT*2;
        var endIconWidth = endIcon.visible?endIcon.width + UI.LIST_ITEM_ROW_SPACEING/2:0;
        if(titleMaxLen + endWidth < itemWidth){
            endText.width = endText.contentWidth;
        }
        if(titleMaxLen + endWidth >= itemWidth){
            if(titleMaxLen <= itemWidth/2 && endWidth >= itemWidth/2){
                endText.width = itemWidth - titleMaxLen - endIconWidth - UI.LIST_ICON_MARGIN_RIGHT*2;
                console.log("titleMaxLen <= itemWidth/2 && endItem.width >= itemWidth/2")
            }else if(titleMaxLen >= itemWidth/2 && endWidth <= itemWidth/2){
                endText.width = endText.contentWidth;
                console.log("titleMaxLen >= itemWidth/2 && endItem.width <= itemWidth/2")
            }else if(titleMaxLen >= itemWidth/2 && endWidth >= itemWidth/2){
                endText.width = Math.round(itemWidth/2) - endIconWidth - UI.LIST_ICON_MARGIN_RIGHT*2;
                console.log("titleMaxLen >= itemWidth/2 && endItem.width >= itemWidth/2")
            }
        }
        mainText.wrapMode  = Text.WrapAnywhere;
        subText.wrapMode = Text.WrapAnywhere;
        endText.elide = Text.ElideRight;
    }
}
